<div id="div2_chart"></div>
<script>

    var kategori = [];
    var series = [];
    var kat = [];
    var ser = [];
    var ser2 = [];
<?php

//var_dump($data);

function format_angka($angka) {
    $len = strlen($angka);
    $res = "";
    $c = 0;
    while ($len > 0) {
        $len--;
        $res=$angka[$len].$res;
        $c = ($c + 1) % 3;
        if ($c == 0 && $len>0)
            $res=".".$res;
    }
    return $res;
}

$counter = 0;
foreach ($data as $pekerjaan) {
    $counter++;
    
    ?>
        
        kat.push("<?= $pekerjaan->kategori ?>");
        ser.push(<?= $pekerjaan->jumlah_laki ?>);
        ser2.push(<?= $pekerjaan->jumlah_perempuan ?>);
    <?php
}
?>
//    $('#div_chart').prepend('<div id="div2_chart"></div>');
    $('#div2_chart').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Jumlah Penduduk Berdasarkan <?= $judul ?>'
        },
        subtitle: {
            text: '<?php if(isset($subtitle)) echo implode('-', $subtitle); else echo 'Banyuwangi'; ?>'
        },
        xAxis: {
            categories: kat,
            labels: {
                rotation: -45,
                style: {
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Jumlah (orang)'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.0f} orang</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
                name: 'Laki-Laki',
                data: ser,
            },
        {
                name: 'Perempuan',
                data: ser2,
            }]
    });

</script>
<div style="margin-top: 40px">
    <table class="table table-striped">
        <tr><th>No.</th><th><?= $judul ?></th><th style="text-align: right">Jumlah Laki-Laki</th><th style="text-align: right">Jumlah Perempuan</th></tr>
<?php
$no=0;$tot1=0;
$tot2=0;
foreach ($data as $row) {
    $tot1+=$row->jumlah_laki;
    $tot2+=$row->jumlah_perempuan;
    $no++;
    ?>
        <tr><td><?=$no?></td><td><?= $row->kategori; ?></td><td style="text-align: right"><?=  format_angka( $row->jumlah_laki); ?></td><td style="text-align: right"><?=  format_angka( $row->jumlah_perempuan); ?></td></tr>
            <?php
        }
        ?>
        <tr><td></td><td>Total</td><td style="text-align: right"><?=  format_angka($tot1."") ; ?></td><td style="text-align: right"><?=  format_angka( $tot2.""); ?></td></tr>
    </table>
</div>